<template>
  <div id="trip">
    <!-- <top-bar :title="title" style="background-color:#F8F8F8" :showBack="false" :istitle="true">
            <md-icon slot="left" class="back_btn" name="snyc_nav_fh" @click="gohome"></md-icon>
           <div slot="right" class="exchangetext" @click="invoiceBtn">开发票</div>
    </top-bar>-->
    <!--重写顶部兼容微信以h5-->
    <div class="topbar">
      <p class="topbarleft">
        <md-icon slot="left" class="back_btn" name="snyc_nav_fh" @click="gohome"></md-icon>
      </p>
      <p>{{title}}</p>
      <p class="exchangetext" @click="invoiceBtn">开发票</p>
    </div>
    <div class="tripTabs">
      <md-tab-bar :titles="tripTabs" @indexChanged="tripBtn"></md-tab-bar>
    </div>
    <div class="trip_box_bg">
      <div class="trip_box" v-if="isShow">
        <md-scroll-view ref="scrollView" :scrolling-x="false" :auto-reflow="true" @refreshing="onRefresh" @endReached="onEndReached">
          <md-scroll-view-refresh
            slot="refresh"
            slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
            :scroll-top="scrollTop"
            :is-refreshing="isRefreshing"
            :is-refresh-active="isRefreshActive"
          ></md-scroll-view-refresh>
          <div class="triping">
            <ul v-for="(item,index) in tripDate" :key="index" @click="tripDetails(item.order_no,item.type)">
              <p>
                {{item.order_type}}
                <span>
                  {{item.order_status}}
                  <md-icon name="wdqb-more" slot="right" class="wdqb-more"></md-icon>
                </span>
              </p>
              <li>
                <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
                {{item.travel_time}}
              </li>
              <li>
                <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
                {{item.origin}}
              </li>
              <li>
                <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
                {{item.destination}}
              </li>
            </ul>
          </div>
          <md-scroll-view-more slot="more" :is-finished="isFinished"></md-scroll-view-more>
        </md-scroll-view>
      </div>
      <div class="dataNo" v-else>
        <p>
          <img src="@/assets/imgs/allotback.png" />
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/wdqb-more.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import { Tabs, TabBar, Icon, Dialog, Toast, ScrollView, ScrollViewRefresh, ScrollViewMore } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
import XBack from 'xback';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [TabBar.name]: TabBar,
    [Toast.name]: Toast,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore
  },
  data() {
    return {
      title: '我的行程',
      tripTabs: ['行程中', '已完成', '已取消'],
      tripDate: [],
      isShow: true,
      page_no: 0,
      page_size: 10,
      isFinished: false,
      indexNumber: '0',
      xBack: null
    };
  },
  created() {
    this.getTrip('0', 0);
    this.xBack = XBack.init(window, event => {
      this.gohome();
    });
  },
  methods: {
    // 返回首页
    gohome() {
      this.xBack.uninit();
      this.$router.replace({
        name: 'Home'
      });
    },
    // 获取行程信息
    getTrip(status, pageNo) {
      let params = {
        status: status,
        page: pageNo,
        rows: this.page_size
      };
      Loading.show();
      http.post('pakj/order/newOrderList', params).then(res => {
        Loading.hide();
        this.$refs.scrollView.finishRefresh();
        this.$refs.scrollView.finishLoadMore();
        this.$refs.scrollView.scrollTo(0, 0, false);
        if (res.data.code === '000000') {
          console.log(res.data.data);
          if (res.data.data.length === 0) {
            this.isShow = false;
            this.isFinished = true;
          }
          for (var item in res.data.data) {
            var data = moment(res.data.data[item].travel_time, 'x').format('MM-DD HH:mm');
            res.data.data[item].travel_time = data;
            this.tripDate.push(res.data.data[item]);
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    onRefresh() {
      this.tripDate = [];
      this.page_no = 0;
      this.isFinished = false;
      this.isShow = true;
      this.getTrip(this.indexNumber, this.page_no);
    },
    tripBtn(index) {
      if (index === 0) {
        // 行程中
        this.indexNumber = '0';
      } else if (index === 1) {
        // 已完成
        this.indexNumber = '1';
      } else if (index === 2) {
        // 取消
        this.indexNumber = '3';
      }
      this.onRefresh();
    },
    onEndReached() {
      if (!this.isFinished) {
        this.page_no += 1;
        var params = {
          status: this.indexNumber,
          page: this.page_no, // 页码
          rows: this.page_size // 每页显示多少条
        };
        Loading.show();
        http.post('pakj/order/newOrderList', params).then(res => {
          Loading.hide();
          this.$refs.scrollView.finishLoadMore();
          this.$refs.scrollView.reflowScroller();
          if (res.data.code === '000000') {
            if (res.data.data.length === 0) {
              this.isFinished = true;
            }
            for (var item in res.data.data) {
              var data = moment(res.data.data[item].travel_time, 'x').format('MM-DD HH:mm');
              res.data.data[item].travel_time = data;
              this.tripDate.push(res.data.data[item]);
            }
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        });
      }
    },
    // 开发票
    invoiceBtn() {
      this.$router.push({
        name: 'invoiceIndex'
      });
    },
    tripDetails(id, type) {
      if (type === '1') {
        // 城际
        window.location.href = '/orderdetail?orderno=' + id;
        // if (Utils.isMiniProgram()) {
        //     window.location.href = "#/orderdetail?orderno=" + id
        // } else {
        //     window.location.href = "/orderdetail?orderno=" + id
        // }
      } else if (type === '2') {
        // 出租车
        window.location.href = '/taxi/taxi?orderno=' + id;
      } else if (type === '3') {
        // 市内用车
        window.location.href = '/incity/detail?orderno=' + id;
      }
      // this.$router.push({
      //     name: "OrderDetail",
      //     query: {
      //         orderno: id
      //     }
      // })
    }
  }
};
</script>
<style lang="stylus" scoped>
#trip {
  height: 100vh;
  background-color: color-primary-background;

  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .md-scroll-view {
    background-color: color-primary-background;
  }

  .exchangetext {
    color: #666;
    font-size: 28px;
  }

  .back_btn {
    width: 22px;
    height: 38px;
  }

  .md-tab-bar {
    background-color: #F8F8F8;
  }

  .trip_box_bg {
    height: 83vh;
    overflow: hidden;
    overflow-y: auto;
  }

  .trip_box {
    padding-top: 20px;
    height: 80vh;
  }

  .trip_box p {
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    color: #333;
    border-bottom: solid 1px #E0E0E0;
    padding: 0px 30px;
    background-color: #fff;
  }

  .trip_box p em {
    display: inline-block;
    overflow: hidden;
    margin-right: 20px;
  }

  .trip_box p b {
    font-weight: 400;
    max-width: 250px;
    min-width: 100px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .trip_box p span {
    float: right;
    color: #FF6917;
    font-size: 26px;
    margin-right: 10px;
  }

  .trip_box ul {
    margin-top: 10px;
    background-color: #fff;
    padding-bottom: 20px;
  }

  .trip_box ul li {
    font-size: 24px;
    color: #666;
    margin: 10px 30px 10px 40px;
  }

  .wdqb-more {
    position: relative;
    width: 12px;
    height: 20px;
    left: 10px;
  }

  .snkc_xcqx_time {
    position: relative;
    width: 16px;
    height: 16px;
    right: 10px;
  }

  .shangchedian {
    position: relative;
    width: 16px;
    height: 16px;
    right: 10px;
  }

  .shangchedian {
    position: relative;
    width: 16px;
    height: 16px;
    right: 10px;
  }

  .dataNo p img {
    width: 100%;
  }

  .topbar {
    height: 88px;
    background-color: #fff;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
  }

  .topbar p {
    padding-top: 20px;
  }

  .topbarleft {
    width: 80px;
  }
}
</style>
